/*
 * @Author: liu wang wang
 * @Date: 2020-07-09 13:20:17
 * @LastEditTime: 2020-07-21 14:41:04
 * @LastEditors: liu wang wang
 * @Description: 创建新版本和归类到现有版本组件
 * @FilePath: \st-sdk-js\src\components\SetGameServer.ts
 */
import Common from '../utils/Common';
import form from './Form';
import versionList from './VersionList';
import { getFormData } from '../utils/formdata';
import api from '../api';
import { defaultInitInterface, KaisaAjaxResponse, VerisonListInterface } from '../../types';
import store from '../utils/store';
import msg from '../utils/Msg';
import { debounce } from '../tools';
enum pageType {
    CREATE = 1,
    NOW_VERSION = 2
}


class SetGameServer extends Common {
    protected theme: string = '#fff';
    protected zoneid: number = 0;
    protected versionList: VerisonListInterface = [];
    protected pageType: pageType = pageType.CREATE;
    constructor() {
        super()
    }
    protected getList(keyword?: string, callback?:Function):void{
        api.getList({
            params: {
                keyword: keyword,
                zoneID:this.zoneid
            },
            success: (res: any) => {
                if (res.code === 200) {
                    let versions = res.data;
                    this.versionList = versions.map(({ id, versionName , isSelected}: { id: number, versionName: string,isSelected:number }) => {
                        return {
                            id,
                            name: versionName,
                            checked: isSelected
                        }
                    });
                    callback && callback()
                } else {
                    msg.msg(res.message);
                }
            }
        });
    }
    // 类型选择区
    protected getRadioBox(): HTMLElement {
        // 创建新版radio
        const radioOfNew: HTMLElement = this.getRadio({
            name: 'type',
            text: '创建版本',
            id: 'radio-of-new',
            checked: true
        })
        radioOfNew.addEventListener('change', () => {
            this.switch(pageType.CREATE);
        });
        // 归类到现有版本radio
        const radioToOther: HTMLElement = this.getRadio({
            name: 'type',
            text: '归类到现有版本',
            id: 'radio-to-other'
        });
        radioToOther.addEventListener('change', () => {
            this.switch(pageType.NOW_VERSION);
        });
        const radioBox: HTMLElement = this.createDiv();
        const radioBoxStyle: string = `
            display:flex;
            margin-bottom:19px;
        `;
        this.setStyle(radioOfNew, 'margin-right:30px;');
        radioBox.appendChild(radioOfNew);
        radioBox.appendChild(radioToOther);
        this.setStyle(radioBox, radioBoxStyle);
        return radioBox;
    }
    // 表单区
    protected getForm(): HTMLElement {
        return form.getForm();
    }
    // 归类到现有版本
    protected getToNowVersion(): HTMLElement {
        const content: HTMLElement = this.createDiv();
        const contentStyle: string = `
            width:100%;
            background:#F4F4F4;
            border-radius:4px;
            border:1px solid rgba(203,203,203,1);
            box-sizing:border-box;
            overflow:hidden;
            height:315px;
            position:relative;
        `;
        const versionListBox = this.createDiv();
        versionListBox.id='now-version-list';
        versionListBox.appendChild(versionList.getVersionList(this.versionList));
        const versionListBoxStyle = `
            width:100%;
            height:265px;
            margin-top:50px;
            overflow-x: hidden;
            overflow-y: scroll;
        `;
        this.setStyle(versionListBox, versionListBoxStyle);
        this.setStyle(content, contentStyle);
        content.appendChild(versionList.getSearch({
            theme: this.theme,
            callback: (keyword:string)=> {
                this.getList(keyword,()=>{
                    this.resetVersionList();
                });
            }
        }));
        content.appendChild(versionListBox);
        return content;
    }
    // 按钮区
    protected getBtns(success: Function): HTMLElement {
        const btnsBox = this.getDivofFlex();
        const sureBtn: HTMLElement = this.getButton({
            width: 80,
            height: 30,
            text: '完成',
            background: this.theme,
            color: '#fff',
            clickHandle: debounce(()=>{
                if (this.pageType === pageType.CREATE) {
                    const formData = getFormData('create-form');
                    formData['zoneID'] = this.zoneid;
                    api.add({
                        data: formData,
                        success: (res: KaisaAjaxResponse['data']) => {
                            if (res.code === 200) {
                                msg.msg('提交成功');
                                success && success();
                                this.close();
                            } else {
                                msg.msg(res.message);
                            }
                        }
                    });
                } else {
                    api.bind({
                        data: {
                            zoneID: this.zoneid,
                            versionID: store.getStore('versionID')
                        },
                        success: (res: any) => {
                            if (res.code === 200) {
                                msg.msg('提交成功');
                                success && success();
                                this.close();
                            } else {
                                msg.msg(res.message);
                            }
                        }
                    });
                }
            },300)
        });
        const cancleBtn: HTMLElement = this.getButton({
            width: 80,
            height: 30,
            text: '取消',
            clickHandle: () => {
                this.close();
                store.getStore('close') && store.getStore('close')();
            }
        });
        this.setStyle(btnsBox, 'float:right;overflow:hidden;');
        this.setStyle(cancleBtn, 'border:1px solid rgba(203,203,203,1);margin-left:20px;');
        btnsBox.appendChild(sureBtn);
        btnsBox.appendChild(cancleBtn);
        return btnsBox;
    }
    // 切换选择类型
    protected switch(type: number): void {
        if (type === pageType.CREATE) {
            (document.getElementById('create-form') as HTMLElement).style.display = 'block';
            (document.getElementById('now-version') as HTMLElement).style.display = 'none';
            this.pageType = pageType.CREATE;
        }
        if (type === pageType.NOW_VERSION) {
            (document.getElementById('create-form') as HTMLElement).style.display = 'none';
            (document.getElementById('now-version') as HTMLElement).style.display = 'block';
            this.pageType = pageType.NOW_VERSION;
        }
    }
    // 重置版本列表
    protected resetVersionList():void{
        const versionlist = versionList.getVersionList(this.versionList);
        const versionListBox = document.getElementById('now-version-list');
        (versionListBox as HTMLElement).innerHTML = '';
        (versionListBox as HTMLElement).appendChild(versionlist);
    }
    // 初始化
    public init({ theme, zoneID, success }: defaultInitInterface): HTMLElement {
        this.pageType = pageType.CREATE;
        this.theme = theme;
        this.zoneid = <number>zoneID;
        this.getList('',()=>{
            this.resetVersionList();
        });
        const content: HTMLElement = this.createDiv();
        this.setStyle(content, 'overflow:hidden;');
        // 类型选择区
        const radioBox: HTMLElement = this.getRadioBox();
        // 表单区
        const formContent: HTMLElement = this.getForm();
        formContent.id = 'create-form';
        const nowVersion: HTMLElement = this.getToNowVersion();
        nowVersion.id = 'now-version';
        this.setStyle(nowVersion, 'display:none;');
        // 文字提示
        const txtTip: HTMLElement = this.createP();
        txtTip.innerText = '完善、准确的信息有利于增强版本曝光';
        this.setStyle(txtTip, 'color:#E02020;margin:10px 0 20px;font-size:14px;');
        // 按钮区
        const btns: HTMLElement = this.getBtns((success as Function));
        content.appendChild(radioBox);
        content.appendChild(formContent);
        content.appendChild(nowVersion);
        content.appendChild(txtTip);
        content.appendChild(btns);
        return content;
    }
}

export default SetGameServer;
